<template>
  <div>
    <h1>Demo</h1>

    <!-- <div v-if="error">请求错误{{ error.message }}</div> -->
    <!-- <div v-else-if="pending">请求中...</div> -->
    <div>请求成功：{{ data }}</div>
  </div>
</template>

<!-- <script lang="ts" setup>
// const { data } = useFetch("/api/channel");
// console.log("data", data);

// useAsyncData 获取数据，会阻塞客户端导航
// const { data, pending, refresh, error } = await useAsyncData("count", () =>
//   $fetch("/api/channel")
// );

// useLazyAsyncData 获取数据，不会阻塞客户端导航
const { data } = await useLazyAsyncData("count", () => $fetch("/api/channel"));
</script> -->

<script lang="ts" setup>
/**
 * setup 语法糖顶层下，可以直接使用 await，不需要使用 async 包裹，
 * 这时该组件变成一个 异步组件，使用时外部需要包裹 Suspense 组件
 * 当前 Nuxt 项目下，我们无需考虑 Suspense 框架层面帮我们做了包裹
 */
const { data, error, refresh, pending } = await useFetch("/api/channel", {
  server: false, // 表示不需要在服务器请求
  immediate: false, // 表示不需要默认发出一次
});
console.log("data", data); // 接口数据
console.log("error", error); // 接口错误信息
console.log("refresh", refresh); // 一个函数，可以用于从新请求接口
console.log("pending", pending); // 一个boolean，用于表示当前接口是否正在请求中
</script>
